<template>
	<div class="student-list">
		<el-card>
			<el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
				<el-form-item>
					<el-button type="primary" @click="addStudent">新增</el-button>
				</el-form-item>
				<el-form-item label="产品名称">
					<el-input v-model="formInline.name" placeholder="产品名称"></el-input>
				</el-form-item>
				<!-- <el-form-item label="产品价格">
                    <el-input v-model="formInline.number" placeholder="产品价格"></el-input>
                </el-form-item>
			 -->
				<!-- <el-form-item label="班级">
                    <el-select v-model="formInline.region" placeholder="班级">
                    <el-option label="框架9班" value="9"></el-option>
                    <el-option label="框架10班" value="10"></el-option>
                    </el-select>
                </el-form-item> -->
				<el-form-item>
					<el-button type="primary" @click="onSubmit">查询</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column width="80" align="center" prop="id" label="产品编号"></el-table-column>
				<el-table-column width="280" align="center" prop="name" label="产品名称"></el-table-column>
				<el-table-column align="center" prop="imgSrc" label="产品外观">
					<template slot-scope="scope">
						　　　　<img :src="scope.row.imgSrc" width="140" height="130" class="head_pic" />
						　　</template>

				</el-table-column>
				<el-table-column align="center" prop="yuanPrice" label="原价"></el-table-column>
				<el-table-column align="center" prop="price" label="现价"></el-table-column>
				<el-table-column align="center" prop="state" label="状态"></el-table-column>
				<!-- <el-table-column align="center" prop="address" label="地址"></el-table-column>
                <el-table-column align="center" prop="phone" label="联系方式"></el-table-column> -->
				<el-table-column align="center" label="操作">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" icon="el-icon-edit" @click="updateInfo(scope.row)">
						</el-button>
						<el-button type="danger" size="mini" icon="el-icon-delete" @click="del(scope.row)"></el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- Table -->
			<el-dialog :title="state?'修改商品信息':'新增商品信息'" :visible.sync="dialogFormVisible" width="500px">
				<el-form :model="form">
					<el-form-item label="产品名称" :label-width="formLabelWidth">
						<el-input v-model="form.name" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="产品外观" :label-width="formLabelWidth">
						<el-input v-model="form.imgSrc" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="原价" :label-width="formLabelWidth">
						<el-input v-model="form.yuanPrice" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="现价" :label-width="formLabelWidth">
						<el-input v-model="form.price" autocomplete="off"></el-input>
						<!-- <el-radio v-model="form.sex" label="1">男</el-radio>
						<el-radio v-model="form.sex" label="2">女</el-radio> -->
					</el-form-item>
					<el-form-item label="状态" :label-width="formLabelWidth">
						<el-select v-model="form.state" placeholder="请选择商品状态">
							<el-option label="已上架" value="已上架"></el-option>
							<el-option label="已下架" value="已下架"></el-option>
							<el-option label="补货中" value="补货中"></el-option>
							<!-- <el-option label="" value="4"></el-option>
							<el-option label="五班" value="5"></el-option>
							<el-option label="六班" value="6"></el-option>
							<el-option label="七班" value="7"></el-option>
							<el-option label="八班" value="8"></el-option>
							<el-option label="九班" value="9"></el-option> -->
						</el-select>
					</el-form-item>
					<!-- 	<el-form-item label="状态" :label-width="formLabelWidth">
						<el-input v-model="form.state" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="地址" :label-width="formLabelWidth">
						<el-input v-model="form.address" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="联系方式" :label-width="formLabelWidth">
						<el-input v-model="form.phone" autocomplete="off"></el-input>
					</el-form-item> -->
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="sure">确 定</el-button>
				</div>
			</el-dialog>
			<Page></Page>
		</el-card>
	</div>
</template>

<script>
	import Page from "../common/Pageing"

	export default {
		components: {
			Page,
		},
		data() {
			return {
				formInline: {
					user: '',
					region: ''
				},
				tableData: [],
				dialogFormVisible: false,
				form: {},
				formLabelWidth: '80px',
				state: false
			}
		},
		created() {
			this.getDataList()
		},
		methods: {
			sure() {
				// alert(this.form.name);
				if (this.state) {
					var that = this;
					axios.post('http://10.134.31.43:8081//updateGoods', {

						id: that.form.id,
						name: that.form.name,
						imgSrc: that.form.imgSrc,
						yuanPrice: that.form.yuanPrice,
						price: that.form.price,
						state: that.form.state,

					}).then(function(res) {
						if (res.data == 1) {
							that.dialogFormVisible = false;
							that.$message({
								message: '修改成功',
								type: 'success',
								duration: 1000
							})
							that.getDataList()
						} else {
							that.dialogFormVisible = false;
							that.$message({
								message: '修改失败',
								type: 'failure',
								duration: 1000
							})
						}

					}).catch(function(err) {
						console.log(err)
					})   
				}else{
					var that = this;
					axios.post('http://10.134.31.43:8081//addGoods', {
					
					
						name: that.form.name,
						imgSrc: that.form.imgSrc,
						yuanPrice: that.form.yuanPrice,
						price: that.form.price,
						state: that.form.state,
					
					}).then(function(res) {
						if (res.data == 1) {
							that.dialogFormVisible = false;
							that.$message({
								message: '增加成功',
								type: 'success',
								duration: 1000
							})
							that.getDataList()
						} else {
							that.dialogFormVisible = false;
							that.$message({
								message: '增加失败',
								type: 'failure',
								duration: 1000
							})
						}
					
					}).catch(function(err) {
						console.log(res)
					})
				}

			},
			addStudent(row) {
				this.state = false
				this.form = {
					...row
				
				}

				this.dialogFormVisible = true
			},
			updateInfo(row) {
				this.state = true
				// console.log(row)
				this.form = {
					...row

				}

				this.dialogFormVisible = true;


			},
			del(row) {

				this.form = {
					...row

				}

				this.$confirm('您确定要删除吗？', '删除提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {

					var that = this;
					axios.get('http://10.134.31.43:8081//deleteGoods', {
						params: {
							id: that.form.id,
						}
					}).then(function(res) {
						console.log(res.data)
						if (res.data == 1) {

							that.$message({
								message: '删除成功',
								type: 'success',
								duration: 1000
							})
							that.getDataList()
						} else {

							that.$message({
								message: '删除失败',
								type: 'failure',
								duration: 1000
							})
						}

					}).catch(function(err) {
						console.log(res)
					})


				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			onSubmit() {
				// alert(this.formInline.name)
				var that = this;
				axios.get('http://10.134.31.43:8081//findFuzzyGoods', {
					params: {
						keywords: that.formInline.name
					}
				}).then(function(res) {
					console.log(res.data)
					that.tableData = res.data
				}).catch(function(err) {
					console.log(err)
				})



			},
			getDataList() {
				var that = this;
				axios.get('http://10.134.31.43:8081//findAllGoods').then(function(res) {
					// console.log(res.data)
					that.tableData = res.data
				}).catch(function(err) {
					console.log(err)
				})

			}
		}

	};
	// Vue.createApp(App).mount('#app');
</script>

<style>
	.student-list {
		margin: 20px 0;
	}

	.el-form {
		text-align: left;
	}

	.el-select {
		width: 100%;
	}
</style>
